<template>
  <div class="item">
    <div class="item-data flex-center-center" @click="handleChangeShowDetail">
      <div class="item-data__left align-items-center">
        <!-- <img
          :src="require(`@/assets/images/eight_electrodes_report/${reportItem.icon}`)"
          alt=""
          class="item-data__left-icon"
        /> -->
        <span class="item-data__left-title">{{ reportItem.name }}</span>
        <p
          v-if="computedCurrentLevel"
          class="item-data__left-brand"
          :style="{ background: computedCurrentLevel.color }">
          {{ computedCurrentLevel.name }}
        </p>
      </div>
      <div class="item-data__right">
        <p class="item-data__right-value">{{ computedValue }}</p>
        <p class="right-unit">{{ reportItem.unit }}</p>
        <img
          src="@/assets/images/eight_electrodes_report/arrow_down.svg"
          alt=""
          class="right-icon"
          :class="{ 'right-icon-rotate': showDetail }"
        />
      </div>
    </div>
    <div class="progress-data_and_desc_intro" v-show="showDetail">
      <div class="triangle"></div>
      <healthdata-report-item-line  v-if="reportItem.processBarVisible" :progressData="reportItem" />
      <div v-if="reportItem.desc" class="item-description" v-html="reportItem.desc" ></div>
      <div v-if="reportItem.intro" class="item-description" v-html="reportItem.intro" ></div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Mixins } from 'vue-property-decorator';
import HealthdataReportItemLine from '../healthdata-report-item-line/index.vue';
import service from './service';

@Component({
  components: {
    HealthdataReportItemLine,
  },
})
export default class extends Mixins(service) {}
</script>

<style lang="scss" scoped>
@import '@/assets/scss/main.scss';
.item {
  .item-data {
    height: rem(108);
    .item-data__left {
      flex: 1;
      .item-data__left-icon {
        width: rem(48);
        height: rem(48);
      }
      .item-data__left-title {
        font-size: rem(30);
        line-height: rem(42);
        margin-left: rem(16);
      }
      .item-data__left-brand {
        margin-left: rem(8);
        height: rem(24);
        line-height: rem(24);
        font-size: rem(16);
        color: #fff;
        padding: 0 rem(10);
        border-radius: rem(12) rem(12) rem(12) 0;
      }
    }
    .item-data__right {
      display: flex;
      .item-data__right-value {
        font-size: rem(32);
        font-weight: 600;
        line-height: rem(45);
      }
      .right-unit {
        font-size: rem(20);
        margin-top: rem(12);
      }
      .right-icon {
        display: block;
        width: rem(28);
        margin-top: rem(14);
        margin-left: rem(11);
        height: rem(20);
        transition: transform 0.2s;
        &.right-icon-rotate {
          transform: rotate(-180deg);
        }
      }
    }
  }
  .progress-data_and_desc_intro {
    transition-duration: 1s;
    transition-property: display;
    background: rgba(246, 247, 248, 1);
    padding: rem(24) rem(30);
    position: relative;
    .triangle {
      position: absolute;
      width: 0;
      height: 0;
      border: rem(12) solid;
      left: rem(12);
      top: rem(-22);
      border-color: transparent transparent rgba(246, 247, 248, 1);
    }
  }
  .item-description {
    font-size: rem(22);
    line-height: rem(30);
    color: rgba(0, 0, 0, 0.6);
    &:not(:last-child) {
      margin-bottom: rem(10);
    }
  }
}
</style>
